<template>
  <div class="pay-amount-top-box">
    <div class="pay-amount-top">
      <div class="pay-amount-top-left">
        <count :id="`interval-${id}`" :endVal="info.interval"></count>
        <div class="des">{{label[0]}}</div>
      </div>
      <div class="pay-amount-top-right">
        <count :id="`yestoday-${id}`" :endVal="info.yestoday" type="yellow"></count>
        <div class="des">{{label[1]}}<span class="rateLabel">环比</span><i :class="['fa',info.rate > 0 ? 'fa-caret-up' : 'fa-caret-down']"></i><Count size="mini" :inlineBlock="true" :endVal="info.rate" :decimals="2" :type="info.rate > 0 ? 'warning' : 'default'" unit="%" :id="`${id}-rate`"></Count></div>
      </div>
    </div>
  </div>
</template>
<script>
  import { count } from '../../components/index'
  export default {
    components: { count },
    props: {
      id: {
        type: String,
        required: true
      },
      info: {
        type: Object,
        required: true
      },
      label: {
        type: Array,
        required: true
      }
    }
  }
</script>
<style lang="stylus" scoped>
  @import './index.styl';
</style>
